<script setup lang="ts">
import { getClassList } from '@/api/class';
import { Cls } from '@/api/class/type';
import { onMounted, ref } from 'vue';

const search = ref('')
const dataList = ref([] as Cls[]);

onMounted(() => {
    getClassList().then((res) => {
        dataList.value = res.data;
    })
})

</script>

<template>
    <div class="container">
        <VanSearch v-model="search" placeholder="请输入班级名"></VanSearch>
        <div class="list">
            <div v-for="item in dataList" class="item">
                <div>
                    
                </div>
                <p>{{ item.name }}</p>
                <VanButton text="加入" type="primary"></VanButton>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.list {
    display: flex;
    flex-direction: column;
    padding: 3%;
    margin: 3%;
    .item {
        display: flex;
    }
}
</style>